<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
    style="display: flex; flex-direction: column"
  >
    <div class="status">
      房情表
      <span
        v-for="(item, index) in roomStatus"
        :key="index"
        :style="{ background: roomStatusColor[index] }"
      >
        {{ item }}
      </span>
      <el-button
        v-if="$hasPermission('hotel:hotelorder:page')"
        type="primary"
        @click="lookShow = true"
        class="exportRoom"
        style="right: 140px"
        >改期记录</el-button
      >
      <el-button
        v-if="$hasPermission('hotel:houseroom:batch')"
        type="primary"
        @click="setPrice()"
        class="exportRoom"
        style="right: 35px"
        >批量定价</el-button
      >
      <el-button
        type="primary"
        @click="setPrice2()"
        class="exportRoom"
        style="right: 245px"
        v-if="$hasPermission('channel:ctrip:channelRoomStock')"
        >渠道商房价房态推送</el-button
      >
    </div>
    <div class="a">
      <el-table
        ref="table"
        v-loading="dataListLoading"
        :data="leftData"
        border
        :header-row-style="{ background: '#ffffff' }"
        style="width: 100%"
        @selection-change="dataListSelectionChangeHandle"
        height="calc(100vh - 292px)"
      >
        <!-- 具体信息 -->
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop=""
          :render-header="renderHeader1"
          label="房型"
          header-align="center"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <p class="fs14">
              <el-switch
                v-if="$hasPermission('guest:roomInfo:batchPutaway')"
                @change="changeStatus(!scope.row.isPutaway, scope.row)"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#ddd"
                :value="scope.row.isPutaway"
                style="transform: scale(0.9); margin-right: 10px"
              >
              </el-switch>
              {{ scope.row.name }}({{ scope.row.roomNumber }})
            </p>
          </template>
        </el-table-column>
        <el-table-column
          :render-header="renderHeader2"
          v-for="(item, index) in dataList"
          :key="index"
          prop="rentDate"
          :label="
            item.rentDate + ',' + weeks[item.rentWeek] + ',' + item.spareRooms
          "
          header-align="center"
          align="center"
          width="114px"
        >
          <template slot-scope="scope">
            <div class="box" :key="update">
              <!-- 选中样式 -->
              <div
                class="cover"
                v-if="checkPosition.indexOf(scope.$index + '-' + index) > -1"
                @click="
                  check(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    item,
                    scope.$index + '-' + index,
                    1,
                    scope.row.floor
                  )
                "
              >
                <p>{{ scope.row.name }}</p>
                <p>
                  {{
                    scope.row.houseBaseId
                      | delDataPrice(
                        scope.row.roomNumber,
                        item.roomDataList,
                        scope.row.floor
                      )
                  }}
                </p>
              </div>
              <!-- 清洁中 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 4
                "
              >
                <p
                  class="s5"
                  @click="
                    updRoomState(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'id'
                      ),
                      4
                    )
                  "
                >
                  清洁中
                </p>
              </div>
              <!-- 暂停使用 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 5
                "
                za
              >
                <p
                  class="s6"
                  @click="
                    updRoomState(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'id'
                      ),
                      5
                    )
                  "
                >
                  暂停使用
                </p>
              </div>
              <!-- 保留房 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 6
                "
              >
                <p
                  class="s7"
                  @click="
                    updRoomState(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'id'
                      ),
                      6
                    )
                  "
                >
                  保留房
                </p>
              </div>
              <!-- 已占用 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 7
                "
              >
                <p
                  class="s8"
                  @click="
                    updRoomState(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'id'
                      ),
                      7
                    )
                  "
                >
                  已占用
                </p>
              </div>
              <!-- 待确定 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == '-1'
                "
              >
                <p
                  class="s4"
                  @click="
                    lookDetail(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'orderId'
                      )
                    )
                  "
                >
                  待确定
                </p>
              </div>
              <!-- 待支付 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == '-2'
                "
              >
                <p
                  class="s0"
                  @click="
                    lookDetail(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'orderId'
                      )
                    )
                  "
                >
                  待支付
                </p>
              </div>
              <!-- 已预订 -->
              <div
                class="cover2"
                draggable="true"
                @drop="
                  drop(
                    $event,
                    getBoxInfo(
                      scope.row.roomNumber,
                      scope.row.houseBaseId,
                      item,
                      'all',
                      scope.row.floor
                    ),
                    item.rentDate,
                    scope.row.isPutaway
                  )
                "
                @dragover="dragOver"
                @dragstart="onStart"
                @dragend="
                  onEnd(
                    $event,
                    getBoxInfo(
                      scope.row.roomNumber,
                      scope.row.houseBaseId,
                      item,
                      'all',
                      scope.row.floor
                    )
                  )
                "
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 1
                "
                @mouseover="
                  hoverTapOver(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    item,
                    scope.$index + '-' + index
                  )
                "
                @mouseleave="showHover = false"
              >
                <p
                  class="s1"
                  @click="
                    lookDetail(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'orderId'
                      )
                    )
                  "
                >
                  <!-- 有待收款显示金钱图标 -->
                  <span
                    class="moneyIcon"
                    v-if="
                      getBoxInfo(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        item,
                        'orderAmount',
                        scope.row.floor
                      ) !=
                      getBoxInfo(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        item,
                        'realityPay',
                        scope.row.floor
                      )
                    "
                    >$</span
                  >
                  <span class="source">
                    {{
                      scope.row.roomNumber
                        | getBoxInfo(
                          scope.row.houseBaseId,
                          item,
                          "guestSourceName"
                        )
                    }}</span
                  >
                  <span class="name">
                    {{
                      scope.row.roomNumber
                        | getBoxInfo(
                          scope.row.houseBaseId,
                          item,
                          "guestName",
                          scope.row.floor
                        )
                    }}</span
                  >
                  已预订
                  <!-- 改期 -->
                  <span
                    v-if="$hasPermission('guest:roomInfo:changeDate')"
                    class="changeTime"
                    @click.stop="
                      changeTime(
                        getBoxInfo(
                          scope.row.roomNumber,
                          scope.row.houseBaseId,
                          item,
                          'orderId',
                          scope.row.floor
                        )
                      )
                    "
                    >改期</span
                  >
                </p>
              </div>
              <!-- 已入住 -->
              <div
                class="cover2"
                draggable="true"
                @drop="
                  drop(
                    $event,
                    getBoxInfo(
                      scope.row.roomNumber,
                      scope.row.houseBaseId,
                      item,
                      'all',
                      scope.row.floor
                    ),
                    item.rentDate,
                    scope.row.isPutaway
                  )
                "
                @dragover="dragOver"
                @dragstart="onStart"
                @dragend="
                  onEnd(
                    $event,
                    getBoxInfo(
                      scope.row.roomNumber,
                      scope.row.houseBaseId,
                      item,
                      'all',
                      scope.row.floor
                    )
                  )
                "
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 2
                "
                @mouseover="
                  hoverTapOver(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    item,
                    scope.$index + '-' + index
                  )
                "
                @mouseleave="showHover = false"
              >
                <p
                  class="s2"
                  @click="
                    lookDetail(
                      delDataStatus(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        scope.row.floor,
                        item.roomDataList,
                        'orderId'
                      )
                    )
                  "
                >
                  <!-- 有待收款显示金钱图标 -->
                  <span
                    class="moneyIcon"
                    v-if="
                      getBoxInfo(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        item,
                        'orderAmount',
                        scope.row.floor
                      ) !=
                      getBoxInfo(
                        scope.row.roomNumber,
                        scope.row.houseBaseId,
                        item,
                        'realityPay',
                        scope.row.floor
                      )
                    "
                    >$</span
                  >
                  <span class="source">
                    {{
                      scope.row.roomNumber
                        | getBoxInfo(
                          scope.row.houseBaseId,
                          item,
                          "guestSourceName"
                        )
                    }}</span
                  >
                  <span class="name">
                    {{
                      scope.row.roomNumber
                        | getBoxInfo(
                          scope.row.houseBaseId,
                          item,
                          "guestName",
                          scope.row.floor
                        )
                    }}</span
                  >
                  已入住
                  <!-- 改期 -->
                  <span
                    class="changeTime"
                    @click.stop="
                      changeTime(
                        getBoxInfo(
                          scope.row.roomNumber,
                          scope.row.houseBaseId,
                          item,
                          'orderId',
                          scope.row.floor
                        )
                      )
                    "
                    >改期</span
                  >
                </p>
              </div>
              <!-- 已退房 -->
              <div
                class="cover2"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 3
                "
              >
                <p class="s3">已退房</p>
              </div>
              <!-- 已上架 -->

              <div
                @drop="
                  drop(
                    $event,
                    getBoxInfo(
                      scope.row.roomNumber,
                      scope.row.houseBaseId,
                      item,
                      'all',
                      scope.row.floor
                    ),
                    item.rentDate,
                    scope.row.isPutaway
                  )
                "
                @dragover="dragOver"
                @click="
                  check(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    item,
                    scope.$index + '-' + index,
                    scope.row.isPutaway,
                    scope.row.floor
                  )
                "
                class="cellBox"
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == 0
                "
              >
                <p>{{ scope.row.name }}</p>
                <p>
                  {{
                    scope.row.houseBaseId
                      | delDataPrice(
                        scope.row.roomNumber,
                        item.roomDataList,
                        scope.row.floor
                      )
                  }}<span class="fs10" v-if="scope.row.isPutaway == 0"
                    >({{ scope.row.isPutaway == 0 ? "未上架" : "" }})</span
                  >
                </p>
              </div>
              <!-- 未上架 -->
              <p
                v-if="
                  delDataStatus(
                    scope.row.roomNumber,
                    scope.row.houseBaseId,
                    scope.row.floor,
                    item.roomDataList,
                    'status'
                  ) == undefined
                "
                class="cellBox"
              ></p>
            </div> </template
        ></el-table-column>
      </el-table>
    </div>
    <div class="btns">
      <div class="left">
        已选择<span>{{ checkDataDate.length }}</span
        >个房间，合计<span>{{ totalPrice }}</span
        >元
      </div>
      <div class="right">
        <template v-if="showIsputway">
          <el-button type="primary" @click="changeStatus(1)">上架</el-button>
          <el-button type="info" @click="changeStatus(0)">下架</el-button>
        </template>
        <el-button
          class="btn b5"
          type="info"
          @click="changePrice()"
          v-if="
            $hasPermission('hotel:houseroom:updRoomPrice') &&
            checkDataDate.length > 0
          "
          >修改价格</el-button
        >
        <el-button
          class="btn b1"
          type="primary"
          @click="updRoomState()"
          v-if="
            $hasPermission('guest:roomInfo:updRoomState') &&
            checkDataDate.length > 0
          "
          >更改房态</el-button
        >
        <el-button
          class="btn b2"
          type="primary"
          @click="
            orderStatus = 2;
            addOrUpdateHandle();
            clearData();
          "
          v-if="
            $hasPermission('hotel:hotelorder:placeOrder') &&
            checkDataDate.length > 0 &&
            isToday.indexOf('-1') > -1
          "
          >补录</el-button
        >
        <el-button
          class="btn b3"
          type="primary"
          @click="
            orderStatus = 2;
            addOrUpdateHandle();
            clearData();
          "
          v-if="
            $hasPermission('hotel:hotelorder:placeOrder') &&
            checkDataDate.length > 0 &&
            isToday.indexOf('1') > -1
          "
          >直接入住</el-button
        >
        <el-button
          class="btn b4"
          @click="
            orderStatus = 1;
            addOrUpdateHandle();
            clearData();
          "
          v-if="
            $hasPermission('hotel:hotelorder:placeOrder') &&
            checkDataDate.length > 0 &&
            isToday.indexOf('2') > -1
          "
          >预约入住</el-button
        >
      </div>
    </div>
    <div
      class="hoverInfo"
      :style="{ left: x + 'px', top: y - 5 + 'px' }"
      v-if="showHover"
    >
      <ul>
        <li>{{ hoverInfo.houseBaseName }}:{{ hoverInfo.roomNumber }}</li>
        <li><i>预订人：</i>{{ $CryptoJS.decrypt(hoverInfo.guestName) }}</li>
        <li><i>渠道来源：</i>{{ hoverInfo.guestSourceName }}</li>
        <li>
          <i>时间：</i>{{ hoverInfo.arriveDate }}至{{ hoverInfo.leaveDate }}
        </li>
        <li>
          <i>订单金额：</i><span>{{ hoverInfo.orderAmount }}</span
          ><i>待收款：</i
          ><span>{{ hoverInfo.orderAmount - hoverInfo.realityPay }}</span>
        </li>
        <li>
          <i>备注：{{ hoverInfo.remarks }}</i>
        </li>
      </ul>
      <div class="triangle"></div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      :type="orderStatus"
      :roomsId="checkDataRoomId"
      @refreshDataList="refresh"
    ></add-or-update>
    <!-- 导入 -->

    <import
      v-if="importVisible"
      ref="import"
      @refreshDataList="refresh"
    ></import>
    <!-- 详情 -->
    <!-- <look-detail v-if="lookDetailVisible" ref="lookDetail" @refreshDataList="refresh"></look-detail> -->
    <!-- 详情2 -->
    <look-detail2
      v-if="lookDetailVisible"
      ref="lookDetail"
      :type="orderStatus"
      :roomsId="checkDataRoomId"
      @refreshDataList="refresh"
    ></look-detail2>
    <!-- 更改房态 -->
    <el-dialog
      class="roomStatus"
      title="更改房态"
      :visible.sync="dialogFormVisible"
      width="30%"
      top="14%"
    >
      <el-form style="padding: 20px 0">
        <el-form-item label="状态" label-width="50px">
          <el-select
            v-model="checkStatus"
            placeholder="请选择状态"
            clearable
            style="width: 100%"
          >
            <el-option label="空置房" :value="0"></el-option>
            <el-option label="清洁中" :value="4"></el-option>
            <el-option label="暂停使用" :value="5"></el-option>
            <el-option label="保留房" :value="6"></el-option>
            <el-option label="已占用" :value="7"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ConfirmUpdRoomState()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 批量定价 -->
    <add-or-update3
      v-if="addOrUpdateVisible3"
      ref="addOrUpdate3"
      @refreshDataList="getleftData();getDataList();"
    ></add-or-update3>
    <!-- 渠道商房价房态推送 -->
     <add-or-update4
      v-if="addOrUpdateVisible4"
      ref="addOrUpdate4"
      @refreshDataList="getleftData();getDataList();"
    ></add-or-update4>
    <!-- 改期记录 -->
    <el-drawer
      title="未排房列表"
      :visible.sync="lookShow"
      size="50%"
      @close="
        getleftData();
        getDataList();
      "
    >
      <list ref="lookRecord"></list>
    </el-drawer>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import Template from "../devtools/template.vue";
import AddOrUpdate3 from "../roomManage/priceSetList-add-or-update"; //批量定价
import AddOrUpdate4 from "../roomManage/priceSetList-add-or-update2"; 
import list from "./exchangeRecord"; //改期记录
var that;
import AddOrUpdate from "./createOrder";
import lookDetail from "../hotelOrder/lookDetail";
import lookDetail2 from "./lookDetail";
import newIndex from "./roomStatusIndex.vue";
import Import from "./excel-import";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      lookShow: false, //改期记录
      update: false,
      importVisible: false,
      newIndexShow: false,
      mixinViewModuleOptions: {
        getDataListURL: "/hotel/guest/room/getDateRoomList",
        getDataListIsPage: false,
      },
      //更改房态
      showHover: false,
      dialogFormVisible: false,
      addOrUpdateVisible3: false,
      addOrUpdateVisible4: false,
      checkStatus: "",
      checkStatus: "",
      currentDate: "",
      dataList: [],
      newDataList: [],
      leftData: [],
      x: 340,
      y: 8,
      hoverInfo: {},
      weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      roomStatus: [
        "待支付",
        "待确定",
        "已预订",
        "已入住",
        "已退房",
        "清洁中",
        "暂停使用",
        "保留房",
        "已占用",
      ],
      roomStatusColor: [
        "#ccc",
        "#6dbcf5",
        "#1dca68",
        "#2d8cf0",
        "#969799",
        "#ffb900",
        "#969799",
        "rgb(28, 71, 116)",
        "#f25022",
      ],
      checkPosition: [],
      checkDataDate: [],
      checkPrice: [],
      checkDataRoomId: [],
      totalPrice: 0,
      dataForm: {
        homestayId: this.$store.state.user.homestayId,
        nowDate: "",
        status: "",
      },
      orderStatus: undefined,
      isToday: [],
      exchangeItem: {},
      isPutaway: null,
      aIndex: null,
      bRoomIndex: null,
      scrollTop: 0,
      scrollLeft: 0,
      showIsputway: false, //显示上下架按钮
      checkedList: [],
    };
  },
  watch: {
    checkDataDate(newval, oldval) {
      var v = [];
      this.isToday = [];
      for (let i = 0; i < newval.length; i++) {
        if (
          new Date(newval[i]).getTime() < new Date(this.currentDate).getTime()
        ) {
          v.push("-1"); //有时间小于今天
        }
        if (
          new Date(newval[i]).getTime() == new Date(this.currentDate).getTime()
        ) {
          v.push("1"); //有时间等于今天
        }
        if (
          new Date(newval[i]).getTime() > new Date(this.currentDate).getTime()
        ) {
          v.push("2"); //有时间大于今天
        }
      }
      this.isToday = v;
    },
    checkPrice(newval, oldval) {
      if (newval) {
        this.totalPrice = 0;
        for (let i = 0; i < newval.length; i++) {
          this.totalPrice += parseFloat(newval[i]);
        }
      }
    },
  },
  filters: {
    getBoxInfo(roomNumber, id, item, name, floor) {
      let obj = {};
      for (let i = 0; i < item.roomDataList.length; i++) {
        if (
          floor == item.roomDataList[i].floor &&
          id == item.roomDataList[i].houseBaseId &&
          roomNumber == item.roomDataList[i].roomNumber
        ) {
          obj = item.roomDataList[i];
          if (name == "guestName") {
            return that.$CryptoJS.decrypt(obj[name]);
          } else {
            return obj[name];
          }
        }
      }
    },
    delDataPrice(id, roomNumber, roomId, floor) {
      for (let i = 0; i < roomId.length; i++) {
        if (
          floor == roomId[i].floor &&
          id == roomId[i].houseBaseId &&
          roomNumber == roomId[i].roomNumber
        ) {
          return "￥" + roomId[i].price;
        }
      }
    },
  },
  components: {
    Import,
    lookDetail,
    lookDetail2,
    AddOrUpdate,
    newIndex,
    AddOrUpdate3,
    AddOrUpdate4,
    list,
  },
  created() {
    that = this;
    this.getleftData();
    let myDate = new Date();
    let year = myDate.getFullYear();
    let mon = myDate.getMonth() + 1;
    let day = myDate.getDate();
    mon = mon > 9 ? mon : "0" + mon;
    day = day > 9 ? day : "0" + day;
    this.currentDate = year + "-" + mon + "-" + day;
  },
  mounted() {
    this.tableScroll();
  },
  methods: {
    dataListSelectionChangeHandle(e) {
      this.checkedList = e;
      if (e.length == 0) {
        this.showIsputway = false;
      } else {
        this.showIsputway = true;
      }
    },
    onStart(e) {
      this.showHover = false;
      this.exchangeItem = {};
      this.isPutaway = null;
      console.log("拖拽开始");
    },
    onEnd(e, item) {
      if (!this.$hasPermission("guest:roomInfo:checkRoom")) {
        return;
      }
      console.log("拖拽结束");
      //空置房，替换和被替换的orderId 一样两种情况可以拖拽
      if (
        (this.exchangeItem.status == 0 ||
          this.exchangeItem.orderId == item.orderId) &&
        this.isPutaway == 1
      ) {
        let index = this.aIndex;
        let roomIndex = this.bRoomIndex;
        let tempItem = Object.assign({}, this.exchangeItem); //空置房(被更改房间)
        let tempItem2 = Object.assign({}, item); //预约或入住房（更改房间）
        //请求接口
        this.$http
          .post("/hotel/guest/room/checkRoom", {
            orderId: tempItem2.orderId,
            roomId: tempItem.id,
            roomNumber: tempItem2.roomNumber,
            floor: tempItem2.floor,
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$nextTick(() => {
                var status = item.status;
                //更改预约或入住房状态
                item.status = 0;
                //处理换的新房间
                this.dataList[index].roomDataList[roomIndex] = tempItem2;
                this.dataList[index].roomDataList[roomIndex].status = status;
                this.dataList[index].roomDataList[roomIndex].houseBaseId =
                  tempItem.houseBaseId;
                this.dataList[index].roomDataList[roomIndex].houseBaseName =
                  tempItem.houseBaseName;
                this.dataList[index].roomDataList[roomIndex].id = tempItem.id;
                this.dataList[index].roomDataList[roomIndex].price =
                  tempItem.price;
                this.dataList[index].roomDataList[roomIndex].orderAmount =
                  tempItem.price;
                this.dataList[index].roomDataList[roomIndex].roomNumber =
                  tempItem.roomNumber;
                this.getleftData();
                this.getDataList();
              });
            } else {
              return this.$message.error(res.data.msg);
            }
          });
      }
    },
    drop(e, item, rentDate, isPutaway) {
      this.isPutaway = isPutaway;
      this.exchangeItem = item;
      let index = this.dataList.findIndex((data) => data.rentDate == rentDate);
      this.aIndex = index;
      let roomIndex = this.dataList[index].roomDataList.findIndex(
        (data) => data.id == item.id
      );
      this.bRoomIndex = roomIndex;
      e.preventDefault();
    },
    dragOver(e) {
      e.preventDefault(); // 一定要执行，否则ondrop事件不会被触发
    },
    //姓名脱敏
    nameTmRules(value) {
      let res = "";
      let arr = Array.from(value);
      if (arr.length === 2) {
        res = arr[0] + "*";
      } else if (arr.length > 2) {
        for (let i = 1; i < arr.length - 1; i++) {
          arr[i] = "*";
        }
        res = arr.join("");
      } else {
        res = value;
      }
      return res;
    },
    //改期
    changeTime(orderId) {
      this.$confirm(`确定改期？`, this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("/hotel/guest/room/RoomChangeDate/" + orderId)
            .then((res) => {
              if (res.data.code !== 0) {
                return this.$message.error(res.data.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getleftData();
                  this.getDataList();
                },
              });
            });
        })
        .catch(() => {});
    },
    //批量定价专用
    setPrice() {
      this.addOrUpdateVisible3 = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate3.init();
      });
    },
    //批量定价专用
    setPrice2() {
      this.addOrUpdateVisible4 = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate4.init();
      });
    },
    //上下架
    changeStatus(val, item) {
      this.$confirm(`确定${val ? "上架" : "下架"}？`, this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          let sendData = [];
          if (item) {
            sendData = [item];
            val = val ? 1 : 0;
          } else {
            sendData=this.checkedList;
            // if (val) {
            //   //上架过滤出来下架的
            //   sendData = this.checkedList.filter((item) => !item.isPutaway);
            // } else {
            //   sendData = this.checkedList.filter((item) => item.isPutaway);
            // }
          }
          this.$http
            .post("/hotel/guest/room/batchPutaway", {
              roomFormList: sendData,
              isPutaway: val,
            })
            .then((res) => {
              if (res.data.code !== 0) {
                return this.$message.error(res.data.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getleftData();
                  this.getDataList();
                },
              });
            });
        })
        .catch(() => {});
    },
    //导入
    importHandle: function () {
      this.importVisible = true;
      this.$nextTick(() => {
        this.$refs.import.init();
      });
    },
    tableScroll() {
      //获取需要绑定的table
      this.dom = this.$refs.table.bodyWrapper;
      let _that = this;
      this.dom.addEventListener("scroll", () => {
        //获取元素的滚动距离
        let scrollTop = _that.dom.scrollTop;
        let scrollLeft = _that.dom.scrollLeft;
        _that.scrollLeft = scrollLeft;
        _that.scrollTop = scrollTop;
      });
    },
    //鼠标移入移出
    hoverTapOver(roomNumber, id, item, ind) {
      let obj = {};
      for (let i = 0; i < item.roomDataList.length; i++) {
        if (
          id == item.roomDataList[i].houseBaseId &&
          roomNumber == item.roomDataList[i].roomNumber
        ) {
          obj = item.roomDataList[i];
        }
      }
      this.hoverInfo = obj;
      this.showHover = true;
      let y = parseFloat(ind.split("-")[1]);
      let x = parseFloat(ind.split("-")[0]);
      //加上滚动条长度
      this.y = x * 60 + 8 - this.scrollTop;
      this.x = y * 113 + 340 - this.scrollLeft;
    },
    getBoxInfo(roomNumber, id, item, name, floor) {
      let obj = {};
      for (let i = 0; i < item.roomDataList.length; i++) {
        if (
          floor == item.roomDataList[i].floor &&
          id == item.roomDataList[i].houseBaseId &&
          roomNumber == item.roomDataList[i].roomNumber
        ) {
          obj = item.roomDataList[i];
          if (name == "all") {
            return obj;
          } else return obj[name];
        }
      }
    },
    refresh() {
      this.$store.state.contentIsNeedRefresh = true;
      this.$nextTick(() => {
        this.$store.state.contentIsNeedRefresh = false;
      });
    },
    //table 表头自定义
    renderHeader1(h, { column, $index }) {
      return (
        <div class="tableHed2">
          {" "}
          <p class="p1"> 日期 </p> <p class="p2">房型 </p> <p class="line"> </p>{" "}
        </div>
      );
    },
    renderHeader2(h, { column, $index }) {
      let columnArr = column.label.split(",");
      if (columnArr[0] == that.currentDate) {
        return (
          <div class="tableHed today">
            {" "}
            <p class="p1">
              {" "}
              {columnArr[0].substring(5)} <span> 今天 </span>{" "}
            </p>{" "}
            <p class="p2">
              {" "}
              剩余 <span> {columnArr[2]} </span>间{" "}
            </p>{" "}
          </div>
        );
      } else {
        return (
          <div class="tableHed">
            {" "}
            <p class="p1">
              {" "}
              {columnArr[0].substring(5)} <span> {columnArr[1]} </span>{" "}
            </p>{" "}
            <p class="p2">
              {" "}
              剩余 <span> {columnArr[2]} </span>间{" "}
            </p>{" "}
          </div>
        );
      }
    },
    //修改价格
    changePrice() {
      this.$prompt("请设置新价格", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /[\d]/,
        inputErrorMessage: "格式不正确",
      })
        .then(({ value }) => {
          this.$http
            .post("/hotel/house/room/updRoomPrice", {
              idList: this.checkDataRoomId,
              price: value,
            })
            .then((res) => {
              if (res.data.code !== 0) {
                return this.$message.error(res.data.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.dialogFormVisible = false;
                  this.clearData();
                  this.getDataList();
                },
              });
            });
        })
        .catch(() => {});
    },
    //更改房态
    updRoomState(id, val) {
      this.dialogFormVisible = true;
      if (id) {
        this.checkDataRoomId = [id];
        this.checkStatus = val;
      }
    },
    ConfirmUpdRoomState() {
      if (this.checkStatus == null) {
        return this.$message.error("请选择更改状态");
      }
      this.$http
        .post("/hotel/guest/room/updRoomState", {
          roomIds: this.checkDataRoomId,
          status: this.checkStatus,
        })
        .then((res) => {
          this.checkStatus = "";
          if (res.data.code !== 0) {
            return this.$message.error(res.data.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.dialogFormVisible = false;

              this.clearData();
              this.getDataList();
            },
          });
        });
    },
    //清空选中的相关数据
    clearData() {
      setTimeout(() => {
        this.checkDataDate = [];
        this.checkPrice = [];
        this.checkDataRoomId = [];
        this.checkPosition = [];
      }, 1500);
    },
    delDataStatus(roomNumber, id, floor, roomId, name) {
      for (let i = 0; i < roomId.length; i++) {
        if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber && floor == roomId[i].floor) {
          return roomId[i][name];
        }
      }
    },
    check(roomNumber, id, item, position, isPutaway,floor) {
      if (isPutaway != 1) return;
      for (let i = 0; i < item.roomDataList.length; i++) {
        if (
           floor == item.roomDataList[i].floor &&id == item.roomDataList[i].houseBaseId &&
          roomNumber == item.roomDataList[i].roomNumber
        ) {
          //宫格位置标识
          if (item.roomDataList[i].status == 0) {
            if (this.checkPosition.indexOf(position) < 0) {
              this.checkPosition.push(position);
            } else {
              let index = this.checkPosition.findIndex(
                (pos) => pos == position
              ); //选中的索引位置
              this.checkPosition.splice(index, 1);
            }
            //房间id
            if (this.checkDataRoomId.indexOf(item.roomDataList[i].id) < 0) {
              this.checkDataRoomId.push(item.roomDataList[i].id);
            } else {
              let index = this.checkDataRoomId.findIndex(
                (roomId) => roomId == item.roomDataList[i].id
              );
              this.checkDataRoomId.splice(index, 1);
            }
            //日期
            if (this.checkPosition.indexOf(position) > -1) {
              this.checkDataDate.push(item.rentDate);
              this.checkPrice.push(item.roomDataList[i].price);
            } else {
              let index = this.checkDataDate.findIndex(
                (date) => date == item.rentDate
              );
              this.checkDataDate.splice(index, 1);
              //价格
              let index2 = this.checkPrice.findIndex(
                (price) => price == item.price
              );
              this.checkPrice.splice(index2, 1);
            }
            if (this.checkPosition.length == 0) {
              this.checkDataDate = [];
              this.checkPrice = [];
            }
          }
        }
      }
    },
    //房型数据
    getleftData() {
      this.$http
        .get(
          `/hotel/house/base/getHouseCategoryData/${this.dataForm.homestayId}`
        )
        .then((res) => {
          if (res.data.code !== 0) {
            return this.$message.error(res.data.msg);
          }
          this.leftData = res.data.data;
        });
    },
    // 表单提交
    save(id) {
      this.$http[id ? "post" : "put"]("/hotel/guest", this.dataForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.getDataList();
            },
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-table__empty-block {
  width: 100% !important ;
}
.box {
  .cover,
  .cover2 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #1372ff;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .fs10 {
    font-size: 10px;
  }
  .cover {
    line-height: 20px;
  }

  .cover2 {
    border-color: #f29130;
    background-color: transparent;

    .s1,
    .s2,
    .s3,
    .s4,
    .s5,
    .s6,
    .s7,
    .s8 {
      height: 100%;
      width: 100%;
      line-height: 58px;
      background-color: rgba(29, 202, 104, 0.1);
      color: rgb(29, 202, 104);
      font-size: 12px;
      position: relative;

      .source {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 8px;
        line-height: 20px;
        color: #fff;
        background: #122a42;
        border-radius: 10px 0 0 10px;
        padding: 0 3px 0 6px;
      }
      .changeTime {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 16px;
        line-height: 18px;
        background: #bdd9ff;
        font-size: 10px;
        color: #fff;
      }
      .moneyIcon {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 16px;
        line-height: 20px;
        color: #f44;
      }
    }

    // 已入住
    .s2 {
      color: rgb(19, 114, 255);
      background-color: rgba(19, 114, 255, 0.1);
    }

    // 已退房
    .s3 {
      color: rgb(150, 151, 153);
      background-color: rgba(150, 151, 153, 0.1);
    }

    //待支付
    .s0 {
      color: rgb(204, 204, 204);
      background-color: rgba(204, 204, 204, 0.1);
    }

    //待确定
    .s4 {
      color: rgb(109, 188, 245);
      background-color: rgba(109, 188, 245, 0.1);
    }

    //清洁中
    .s5 {
      color: rgb(255, 185, 0);
      background-color: rgba(255, 185, 0, 0.1);
    }

    .cell {
      height: 60px;
      line-height: 60px;
    }

    //暂停使用
    .s6 {
      color: rgb(150, 151, 153);
      background-color: rgba(150, 151, 153, 0.1);
    }

    //保留房
    .s7 {
      color: rgb(28, 71, 116);
      background-color: rgba(28, 71, 116, 0.1);
    }

    //已占用
    .s8 {
      color: rgb(242, 80, 34);
      background-color: rgba(242, 80, 34, 0.1);
    }
  }
}

.status {
  display: flex;
  gap: 20px;
  color: #fff;
  margin-bottom: 20px;
  font-weight: bold;
  color: #293c73;
  font-size: 20px;

  span {
    padding: 5px;
    color: #fff;
    font-weight: normal;
    font-size: 14px;
    border-radius: 5px;

    &:first-child {
      margin-left: 40px;
    }
  }
}

.btns {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 111;
  text-align: right;
  height: 120px;
  background: #fff;
  border-top: 1px solid #ddd;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;

  .left {
    font-size: 14px;
    color: #293c73;

    span {
      font-size: 20px;
      color: #1372ff;
      font-weight: bold;
    }
  }

  .right {
    width: 300px;
    flex: 1;

    .btn {
      // width: 128px;
      // height: 56px;
      // background: #1372ff;
      // border-radius: 10px;
      // text-align: center;
      color: #fff;
      font-size: 16px;
      // font-weight: bold;

      &.b1 {
        box-shadow: 0px 3px 16px 1px rgba(41, 60, 115, 0.3);
        background-color: #293c73;
      }

      &.b2 {
        box-shadow: 0px 3px 16px 1px rgba(83, 98, 143, 0.3);
        background-color: #53628f;
      }

      &.b3 {
        box-shadow: 0px 3px 16px 1px rgba(41, 60, 115, 0.3);
        background-color: #1372ff;
      }

      &.b4 {
        box-shadow: 0px 3px 16px 1px rgba(29, 202, 104, 0.3);
        background-color: #1dca68;
      }
      &.b5 {
        box-shadow: 0px 3px 16px 1px rgba(113, 138, 244, 0.3);
        background-color: #718af4;
      }
    }
  }
}

.fs14 {
  font-size: 14px;
  color: #293c73;
}

::v-deep .tableHed2 {
  padding: 12px 30px 10px 20px;

  .p1 {
    text-align: right;
    line-height: 20px;
  }

  .p2 {
    text-align: left;
    line-height: 20px;
  }
}

.a {
  ::v-deep .el-table th.is-leaf:nth-child(2) {
    padding: 0;

    .cell {
      height: 72px;
      padding: 0;
    }

    & ::after {
      padding: 0;
      position: absolute;
      display: block;
      content: "";
      top: 36px;
      height: 1px;
      background-color: #eaedf1;
      width: 108%;
      left: -6px;
      transform: rotate(19.5deg);
      z-index: 10;
    }
  }

  ::v-deep .tableHed {
    padding-top: 12px;

    &.today {
      background: linear-gradient(180deg, #e1eaf8 0%, #ffffff 100%);
    }

    .p1 {
      color: #293c73;
      font-size: 12px;
      font-weight: bold;

      span {
        font-weight: normal;
        margin-left: 10px;
      }
    }

    .p2 {
      font-size: 12px;
      color: #b9c2d0;
      font-weight: normal;

      span {
        color: #1372ff;
        font-size: 14px;
        margin: 0 1px;
      }
    }
  }

  ::v-deep .el-table th {
    background: transparent;
    padding: 0;

    .cell {
      height: 72px;
    }
  }

  ::v-deep p {
    padding: 0;
    margin: 0;
  }

  ::v-deep .el-table td {
    // padding: 6px 0 2px;
    padding: 0;
  }

  ::v-deep .el-table .cell {
    padding: 0;
    height: 60px;
    line-height: 60px;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
}

.cellBox {
  font-size: 12px;
  cursor: pointer;
  color: #b9c2d0;
  display: flex;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 20px;

  p:first-child {
    display: none;
  }

  &:hover p:first-child {
    display: block;
  }
}

.hoverInfo {
  position: fixed;
  background: #fff;
  width: 300px;
  top: 130px;
  left: 340px;
  box-shadow: 0px 3px 21px 1px rgba(0, 0, 0, 0.06);
  border: 1px solid #eaedf1;
  border-radius: 6px;
  z-index: 9999;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 30px;

    li {
      padding: 12px 16px 0 16px;
      color: #293c73;
      font-size: 12px;

      &:first-child {
        font-size: 14px;
        color: #293c73;
        padding: 16px;
        border-bottom: 1px solid #edeef0;
      }

      &:nth-child(3) {
        color: #1372ff;
      }

      &:nth-child(5) {
        border-bottom: 1px solid #edeef0;
        border-top: 1px solid #edeef0;
        padding-bottom: 12px;
        margin-top: 12px;

        span {
          color: #ed5656;
          font-weight: bold;

          &:nth-of-type(1) {
            color: #293c73;
            margin-right: 60px;
          }
        }
      }

      i {
        font-style: inherit;
        color: #53628f;
      }
    }
  }

  .triangle {
    &::before {
      width: 0;
      height: 0;
      border-top: 14px solid #fff;
      border-right: 12px solid transparent;
      border-left: 12px solid transparent;
      position: absolute;
      bottom: 0;
      left: 50%;
      display: block;
      content: "";
      transform: translate(-50%, 13px);
      z-index: 19;
    }

    &::after {
      width: 0;
      height: 0;
      border-top: 14px solid rgba(0, 0, 0, 0.06);
      border-right: 12px solid transparent;
      border-left: 12px solid transparent;
      position: absolute;
      bottom: 0;
      left: 50%;
      content: "";
      display: block;
      transform: translate(-50%, 14px);
      z-index: 1;
    }
  }
}

.exportRoom {
  position: absolute;
  right: 35px;
  top: 30px;
  z-index: 1;
}
</style>
